import Search from "@/components/public/Search";
import { View, Text, Image, Picker } from "@tarojs/components";
import ico_del from "@/assets/image/ico_del.svg";
import ico_phone from "@/assets/image/ico_phone.svg";

import "./index.scss";
import { addCount, indexFind } from "@/services/entities/all";
import { useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import ico_jiantou_one from "@/assets/image/ico_jiantou_one.svg";

import {
  addCounts,
  getLevelImage,
  getLevelName,
  linkWithParams,
  makePhoneCall,
} from "@/helper/utils";
import { routes } from "@/constants/routes";
import { getGlobalData } from "@/global_data";
const SearchPage = () => {
  const [list, setList] = useState<any>([]);
  const [searchList, setSearchList] = useState<any>([]);
  const [address, setAddress] = useState<any>([]);
  const [city, setCity] = useState<any>();

  const currentValue = useRef("");
  const getList = () => {
    indexFind({
      search: currentValue.current,
      area: city ?? "",
    }).then((res: any) => {
      setList(res);
    });
  };

  const setLocal = (value) => {
    const local = Taro.getStorageSync("searchList");
    let result = "";
    let arr: any = [];
    if (local) {
      arr = local.split(",");
      if (arr.length > 9) {
        arr.pop();
        arr.push(value);
      } else {
        arr.push(value);
      }
    } else {
      arr.push(value);
    }
    result = arr.join(",");
    setSearchList(arr);
    Taro.setStorageSync("searchList", result);
  };

  const clear = () => {
    Taro.setStorageSync("searchList", "");
    setSearchList([]);
  };

  useEffect(() => {
    const local = Taro.getStorageSync("searchList");
    let arr: any = [];
    if (local) {
      arr = local.split(",");
      setSearchList(arr);
    }
  }, []);

  return (
    <View className="search-container bg-page">
      <View className="dis-flex align-center bg-ffffff pd-18 border-box">
        <Picker
          mode="region"
          value={address}
          onChange={(e) => {
            setAddress(e.detail.value);
            setCity(e.detail.value[2]);
          }}
        >
          <View className="dis-flex align-center city">
            <Text className="fs-28 lh-38 cl-black">
              {address?.length ? address[2] : "选择城市"}
            </Text>
            <Image src={ico_jiantou_one} className="city-img img-40" />
          </View>
        </Picker>
        <Search
          className="bg-ffffff width-full flex-1 ml-12"
          placeholder="输入产品，品牌，商家等均可查找"
          onInput={(value) => {
            currentValue.current = value;
          }}
          right={
            <View
              className="bg-394B5D cl-white fs-28 lh-38 pd-tb-8 border-box pd-lr-38 br-28 mr-4"
              onClick={() => {
                getList();
                if (currentValue.current) {
                  setLocal(currentValue.current);
                }
              }}
            >
              搜索
            </View>
          }
        />
      </View>
      <View className="dis-flex align-center justify-between mt-32 pd-lr-18 border-box">
        <Text className="fs-32 cl-black">历史记录</Text>
        <View className="dis-flex align-center" onClick={clear}>
          <Image src={ico_del} className="mr-8 img-36" />
          <Text className="fs-28 cl-848484">删除</Text>
        </View>
      </View>
      <View className="dis-flex flex-wrap gap-16 pt-32 pd-lr-18 border-box">
        {searchList.map((item, index) => {
          return (
            <View
              onClick={() => {
                currentValue.current = item;
                getList();
              }}
              key={index}
              className="pd-lr-18 pd-tb-12 fs-24 lh-24 cl-black bg-ffffff br-8"
            >
              {item}
            </View>
          );
        })}
      </View>
      <View className="flex-column mt-32 pd-lr-18 border-box">
        {list?.map((item, index) => {
          return (
            <View
              key={index}
              className="mb-16 bg-ffffff dis-flex br-8 pd-24 pl-16 border-box"
            >
              <View
                className="flex-column left align-center"
                onClick={() => {
                  linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                    storeId: item.id,
                  });
                }}
              >
                <Image src={getLevelImage(item.level)} className="img-80" />
                <View className="bg-4EBE6F br-16 pd-lr-20 fs-20 lh-32 cl-white mt-40">
                  {getLevelName(item.level)}
                </View>
              </View>
              <View className="flex-column flex-5 ml-30">
                <Text
                  className="fs-32 lh-42 cl-black"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                      storeId: item.id,
                    });
                  }}
                >
                  {item.name}
                </Text>
                <Text
                  className="mt-24 fs-24 lh-32 cl-black"
                  onClick={() => {
                    linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                      storeId: item.id,
                    });
                  }}
                >
                  经营范围：{item.shopScope}
                </Text>
                <View className="dis-flex align-center justify-between">
                  <Text
                    className="cl-8C8C8C fs-24 lh-32"
                    onClick={() => {
                      linkWithParams(routes.ROUTES_SHOP_DETAIL, {
                        storeId: item.id,
                      });
                    }}
                  >
                    地址：{item.address}
                  </Text>
                  <Image
                    src={ico_phone}
                    className="img-62"
                    onClick={() => {
                      addCounts(item.id);
                      makePhoneCall(item.phone);
                    }}
                  />
                </View>
              </View>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default SearchPage;
